<script setup lang="ts">
import { reactive, watch } from "vue";
const user = reactive({
  name: "张三",
  info: {
    gender: "男",
    age: 18,
  },
});

// 侦听对象属性值，改写成箭头函数 返回属性值的写法
// watch(() => user.info.age, () => {
//   console.log('user.info.age 变化了')
// })

// 通过参数3：开启深度侦听 { deep: true }
watch(() => user.info, () => {
  console.log('user.info 对象变化了，深度侦听')
}, { deep: true })

</script>

<template>
  <p>{{ user }}</p>
  <button @click="user.name = '李四'">点击改名</button>
  <button @click="user.info.age += 1">点击年龄+1</button>
</template>
